
{%- liquid
  case section.settings.color_schema
    when 'white'
      assign color_style = 'light'
    when 'gray'
      assign color_style = 'gray'
    else 
      assign color_style = 'default'
  endcase
-%}

<div class="py-7 footnotes {{ color_style }}">
  <div class="container">
    <div class="text-start">
      {%- if section.settings.text != blank -%}
        <div class="no-last-margin richtext-with-link small">
          {{ section.settings.text | replace: '<p', '<p class="mb-2"' | replace: '<ol', '<ol class="ps-3"' | replace: '<a', '<a class="link-footer fw-normal"' }}
        </div>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Footnotes",
    "class": "footnotes-sec",
    "tag": "section",
    "settings": [
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "gray",
            "label": "Gray"
          },
          {
            "value": "white",
            "label": "White"
          }
        ],
        "default": "white"
      },
      {
        "type": "richtext",
        "id": "text",
        "default": "<p>Use this text block to show store announcements, advertise products and collections, or simply welcome visitors to your store.</p>",
        "label": "Text"
      }
    ],
    "presets": [
      {
        "name": "Footnotes"
      }
    ]
  }
{% endschema %}